
<include file="mobile/Public/header" />

<link rel="stylesheet" href="__CSS__/good.css">
<link rel="stylesheet" href="__CSS__/makeorder.css">
<style>
	.star-section{padding: 1.5rem}
	.star-section img{ padding: 0.3rem;width: 1.6667rem}
	.comment-section{padding:0 0.834rem}
	.comment-section label{margin: 5px 0;display: inline-block}
	.comment-section .demand{width: 100%;border-radius: 3px;height: 7rem;resize: none;border:none;padding: 0.7rem;font-size: 1.4rem;}
	.comment-section .count{height: 3rem;border-radius: 3px;resize: none;border:none;font-size: 1.4rem;}
	.comment-section .unit{padding: 5px;background: grey}
	.comment-section .connection{border: none;height: 3rem;font-size: 1.4rem}
	.pic-content{padding:0.834rem}
	.pic-content section{ height: 0;width: 22%;position: relative;padding:0 0 22%;float: left;margin-right: 4%;margin-bottom: 1rem;background: white}
	.pic-content section:nth-child(4n){margin-right: 0}
	.pic-content section>.square-div{ position: absolute;height: 100%;width: 100%}
	.square-div>img{width: 100%;height: 100%;border: thin solid #dadada}
	.icon-img{padding:1.5rem}
	.padding-top{padding-top: 1rem}
	.padding-bottom{padding-bottom:1.2rem}
	ul{
		width: 98%;
		margin: 0 auto;
	}
	ul li{
		display: inline-block;
		width: 30%;
		margin: 2px;
		text-align: center;
		border: 1px solid black;
		line-height: 3rem;
		border-radius: 5px;
		background: orange;
	}
</style>
<header class="color-main vertical-box">
	<span class="header-title">一键找布</span>
	<div class="header-left vertical-box">
		<img class="img-btn" src="__IMG__/back.png" onclick="history.back()">
	</div>
	<div class="header-right vertical-box">
		<img class="img-btn" src="__IMG__/home.png" onclick="window.location.href='{:U('shop/index/index')}'">
	</div>
</header>
<article class="">
	<article class="order_products">
		<section class="select margin-top margin-bottom">
			<ul>
				<li><span>找面料</span></li>
				<li><span>找辅料</span></li>
				<li><span>找加工/服务</span></li>
			</ul>
		</section>

		<section class="pic-content linear-section margin-bottom clearfix">
			<section id="uploadBtn" class="upload-btn icon-section">
				<div class="square-div">
					<img class="icon-img border-box" src="__IMG__/add.png">
				</div></section>
			<script id="pic-tpl" type="text/x-dot-template">
				<section class="pic-section"><div class="square-div">
						<img class="good-img" src="{{=it}}">
					</div></section>
			</script>
		</section>

		<section class="comment-section linear-section margin-bottom">
			<label for="demand">具体规格和要求：</label>
			<textarea id="demand" class="brief-textarea border-box demand" placeholder="请尽可能多的提供信息有助于供应商快速给您反馈。"></textarea>
		</section>

		<section class="comment-section linear-section margin-bottom padding-top padding-bottom">
			<label for="count">采购数量：</label>
			<input id="count" class="brief-textarea border-box count" type="number" placeholder="请填写数量"></input>
			<select class="unit">
				<option>米</option>
				<option>尺</option>
			</select>
		</section>

		<section class="comment-section linear-section margin-bottom padding-top padding-bottom">
			<label for="connection">联系方式：</label>
			<input id="connection" class="connection" placeholder="请留下您的联系方式">
        <!--<span class="linear-right vertical-box"><span>-->
            <!--<img src="__IMG__/go.png">-->
        <!--</span></span>-->
		</section>

	</article>
	<footer class="btn-footer footer-one-btn margin-bottom">
		<button class="makeorderBtn saveComment color-primary">立即发布</button>
	</footer>
</article>

<include file="mobile/Public/footer" />

<script>
	var address_data = <php> echo(!empty($address[0])? json_encode($address[0]):"null")</php>;//useful
	//'jquery' or 'zepto' 脚本入口,按情况选择加载
	seajs.use(['jquery','doT'], function () {
		$(document).ready(function () {


			seajs.use('plupload',function ()
			{
				var uploader_img = new plupload.Uploader({
					browse_button: 'uploadBtn',
					url:  "{:U('Core/File/uploadPicture',array('session_id'=>session_id()))}",
					filters: {
						max_file_size: '20mb',
						mime_types: [
							{title: "Image files", extensions: "jpg,gif,png,bmp"}
						]
					},
					init: {
						FilesAdded: function (up, files) {
							uploader_img.start();
						},
						FileUploaded: function (up, files, res) {
							res = JSON.parse(res.response); //PHP上传成功后返回的参数
							console.log(res,res.data.file.path);
							if(res.status){
								var picTpl = doT.template($('#pic-tpl').text());
								$('#uploadBtn').after(picTpl(res.data.file.path))
							}
							else
							{
								alert(res.info)
							}
						},
						Error: function (upload,error) {
							alert('上传失败，未知错误:'+error.code)
							if(error.code==(-600)){
								alert('图片大小为0-1mb范围内')
							}
							else{
								alert('上传失败，未知错误:'+error.code)
							}
						}
					}
				});
				uploader_img.init();
			});

			$('.star-section img').click(function () {
				$(this)
					.attr('src','__IMG__/star1.png').addClass('active-star')
					.prevAll().attr('src','__IMG__/star1.png').addClass('active-star');
				$(this).nextAll().attr('src','__IMG__/star1_.png').removeClass('active-star');
			});
			$('.pic-content').on('click','.pic-section', function () {
				if(confirm('您想取消此图片吗？')){
					$(this).remove()
				}
			});
			$('.saveComment').click(function () {
				var error = 0;
				var product_comment = {};
				$('.order_products').each(function (index) {
					var brief = $(this).find('.brief-textarea').val().trim();
					console.log(brief);
					if(brief==''){
						alert('评价不能为空');
						error = 1;
						return
					}
					var images = [];
					$(this).find('.pic-section').each(function () {
						var src = $(this).find('.good-img').attr('src');
						images.push(src)
					});
					images = images.join(';');
					product_comment[index] = {
						product_id:order_data.products[index].sku_id,
						sku_id:order_data.products[index].sku_id,
						score:$(this).find('.active-star').length,
						brief:brief,
						images:images,
						order_id:order_data.id
					}
				});
				if(error) return;
				var data = {
					product_comment:product_comment
				};
				$.post('{:U('shop/index/comment')}',data, function (ret) {
					// ret = JSON.parse(ret);
					console.log(ret);
					if(ret.status==1){
						alert('评论成功');
						// sessionStorage.commentStatus = 1;
						// history.back();
						// window.location.reload();
						window.location.href="index.php?s=/shop/index/orders/status/5.html";
					}
					else{
						alert('评论失败，'+ret.info);
//						history.back()
					}

				})
			})
		})
	});

</script>
</body>
</html>